<template>
  <div class="main-content">
    <div style="width: 60%; margin: 30px auto">
      <div style="margin: 20px 0">
        <el-input placeholder="请输入航班名称" style="width: 200px" v-model="name"></el-input>
        <el-input placeholder="请输入出发机场" style="width: 200px; margin-left: 5px" v-model="startAirport"></el-input>
        <el-input placeholder="请输入到达机场" style="width: 200px; margin-left: 5px" v-model="endAirport"></el-input>
        <el-button type="info" plain style="margin-left: 10px" @click="load()">查询</el-button>
        <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
      </div>
      <div style="display: flex; background-color: #d8e3e2; margin-bottom: 20px">
        <div style="width: 200px; text-align: center; line-height: 40px;">航班名称</div>
        <div style="width: 130px; text-align: center; line-height: 40px;">起始机场</div>
        <div style="width: 130px; text-align: center; line-height: 40px;">到达机场</div>
        <div style="width: 120px; text-align: center; line-height: 40px;">航班时长</div>
        <div style="width: 120px; text-align: center; line-height: 40px;">航班价格</div>
        <div style="width: 100px; text-align: center; line-height: 40px;">剩余票数</div>
        <div style="flex: 1; text-align: center; line-height: 40px;">操作</div>
      </div>
      <div style="display: flex; margin-bottom: 30px" v-for="item in airticketData">
        <div style="width: 200px; align-items: center; display: flex">
          <img :src="item.img" alt="" style="width: 40px; height: 40px">
          <div style="margin-left: 10px">
            <div>{{item.left}}</div>
            <div style="font-size: 13px; color: #666666">{{item.right}}</div>
          </div>
        </div>
        <div style="width: 130px; text-align: center">
          <div style="font-size: 22px">{{item.startTime}}</div>
          <div style="font-size: 13px; color: #666666">{{item.startAirport}}</div>
        </div>
        <div style="width: 130px; text-align: center">
          <div style="font-size: 22px">{{item.endTime}}</div>
          <div style="font-size: 13px; color: #666666">{{item.endAirport}}</div>
        </div>
        <div style="width: 120px; text-align: center; line-height: 40px;">{{ item.time }}</div>
        <div style="width: 120px; text-align: center; line-height: 40px; font-size: 22px; color: red">￥{{ item.price }}</div>
        <div style="width: 100px; text-align: center; line-height: 40px;">{{ item.num }}</div>
        <div style="flex: 1; text-align: center; line-height: 40px;">
          <el-button type="primary" size="mini" :disabled="item.num === 0" @click="buyInit(item)">购买</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
      <el-form label-width="100px" style="padding-right: 50px">
        <el-form-item prop="begin" label="出发时间">
          <el-date-picker style="width: 100%"
              v-model="begin"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="buyNum" label="购买数量">
          <el-input v-model="buyNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" @click="buy">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {

  data() {
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      name: null,
      startAirport: null,
      endAirport: null,
      airticketData: [],
      begin: null,
      buyNum: null,
      fromVisible: false,
      form: {},
    }
  },
  mounted() {
    this.load()
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    load() {
      // 查询所有的机票（支持根据条件来查询所有的机票）
      this.$request.get('/airticket/selectAll', {
        params: {
          name: this.name,
          startAirport: this.startAirport,
          endAirport: this.endAirport
        }
      }).then(res => {
        if (res.code === '200') {
          this.airticketData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    reset() {
      this.name = null
      this.startAirport = null
      this.endAirport = null
      this.load()
    },
    buyInit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.begin = null
      this.buyNum = null
      this.fromVisible = true
    },
    buy() {
      let data = {
        name: this.form.name,
        userId: this.user.id,
        begin: this.begin,
        startAirport: this.form.startAirport,
        endAirport: this.form.endAirport,
        timeSlot: this.form.time,
        num: this.buyNum,
        price: this.form.price,
        status: '已购买',
        ticketId: this.form.id
      }
      this.$request.post('/airorders/add', data).then(res => {
        if (res.code === '200') {
          this.$message.success('购买成功')
          this.fromVisible = false
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style>
.overflowShow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
</style>